<template>
  <CommonCard :title="'今日销售额'" :value="(salesToday as number)">
    <div class="compare-wrap">
      <div class="compare">
        <div>日同比</div>
        <div class="emphasis">{{ salesGrowthLastDay }}%</div>
        <div
          :class="(salesGrowthLastDay as number)>0 ? 'increment' : 'decrement'"
        ></div>
      </div>
      <div class="compare">
        <div>日同比</div>
        <div class="emphasis">{{ salesGrowthLastMonth }}%</div>
        <div
          :class="(salesGrowthLastMonth as number)>0 ? 'increment' : 'decrement'"
        ></div>
      </div>
    </div>

    <!-- 底部具名插槽 -->
    <template #bottom>
      <span>昨日销售额</span>
      <span class="emphasis">{{ salesLastDay }}</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TodatSales",
});
</script>

<script setup lang="ts">
import CommonCard from "./CommonCard.vue";
//引入store
import { useDataStore } from "@/stores/reportData";
//引入计算属性
import { computed } from "vue";
//得到store对象
const dataStore = useDataStore();

//通过计算属性得到需要的数据
const salesToday = computed(() => dataStore.reportData.salesToday);
const salesGrowthLastDay = computed(
  () => dataStore.reportData.salesGrowthLastDay
);
const salesGrowthLastMonth = computed(
  () => dataStore.reportData.salesGrowthLastMonth
);
const salesLastDay = computed(() => dataStore.reportData.salesLastDay);
</script>

<style lang="scss" scoped>
.compare-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  .compare {
    flex: 1;
    display: flex;
    align-items: center;
  }
}
</style>
